<mat-form-field>
  <input matInput placeholder="输入好友用户名" [matAutocomplete]="auto" [formControl]="searchUsername">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="setSelectedUser($event.option.value)">
    <ng-container>
      <mat-option *ngFor="let user of filteredUsers" [value]="user">
        <span>{{user.username}}</span>
        <small>|ID: {{user.id}}</small>
      </mat-option>
    </ng-container>
  </mat-autocomplete>
</mat-form-field>

<button mat-button type="button" [disabled]="!selectedUser" (click)="addUserToForm()">添加用户</button>

<mat-chip-list *ngIf="users.length>0;else no_users">
  <mat-chip *ngFor="let user of users" (removed)="removeUserFromForm(user)">
    {{user.username}}
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

<ng-template #no_users>
  <mat-error>无已选用户</mat-error>
</ng-template>
